import React from 'react'
import { Layout, Menu } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  DashboardOutlined,
  ApiOutlined,
  LinkOutlined,
  BranchesOutlined,
  DatabaseOutlined,
  SettingOutlined,
} from '@ant-design/icons'

const { Sider } = Layout

const menuItems = [
  {
    key: '/',
    icon: <DashboardOutlined />,
    label: '仪表板',
  },
  {
    key: '/connectors',
    icon: <ApiOutlined />,
    label: '连接器',
  },
  {
    key: '/connections',
    icon: <LinkOutlined />,
    label: '连接',
  },
  {
    key: '/pipelines',
    icon: <BranchesOutlined />,
    label: '管道',
  },
  {
    key: '/topics',
    icon: <DatabaseOutlined />,
    label: '主题',
  },
  {
    key: '/settings',
    icon: <SettingOutlined />,
    label: '设置',
  },
]

const Sidebar: React.FC = () => {
  const navigate = useNavigate()
  const location = useLocation()

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key)
  }

  return (
    <Sider width={200} theme="dark">
      <div className="logo">
        FluvioX
      </div>
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        items={menuItems}
        onClick={handleMenuClick}
        theme="dark"
        style={{ height: '100%', borderRight: 0 }}
      />
    </Sider>
  )
}

export default Sidebar
